﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AutoFormular.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Auto complete</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#name-wrapper').append("<ul class='auto-complete-list'></ul>");

            $('.auto-complete-list')
                .css("background-color", "White")
                .css("top", "22px")
                .css("left", "88px")
                .css("z-index", "1000");

            $('#uiName').keyup(function () {
                $(".auto-complete-list").children().remove();

                // Assign handlers immediately after making the request,
                // and remember the jqxhr object for this request
                var request = { "Name": $("#uiName").val() };

                var jqxhr = $.post("Peoplepusher.aspx", request)
                .success(function (response) {

                    //[{"FirstName":"Steven","LastName":"Buchanan","Address":"14 Garrett Hill","HomePhone":"(71) 555-4848"}]
                    $.each(response, function (index, key) {
                            $("<li class='result'>" + key.FirstName + " " + key.LastName + "</li>")
                            /*.data('firstname', key.FirstName)
                            .data('lastname', key.LastName)
                            .data('address', key.Address)
                            .data('phone', key.HomePhone)*/
                            .data({
                                    'firstname' : key.FirstName,
                                    'lastname' : key.LastName,
                                    'address' : key.Address,
                                    'phone' : key.HomePhone
                            })
                            .appendTo(".auto-complete-list");
                    });

                    // Tilføj diverse events til de oprettede LI
                    $(".auto-complete-list li").each(function (intIndex) {
                        $(this).bind({
                            click: function () {
                                $("#uiName").val($(this).data('firstname') + " " + $(this).data('lastname')).focus();
                                $("#uiAddress").val($(this).data('address'));
                                $("#uiPhone").val($(this).data('phone'));

                                $(".auto-complete-list")
                                    .css("visibility", "hidden")
                                    .children()
                                    .remove();
                            },
                            mouseenter: function () {
                                //console.log("mouseenter index: " + intIndex);
                                $(this).css("background-color", "Lime");
                            },
                            mouseleave: function () {
                                //console.log("mouseleave index: " + intIndex);
                                $(this).css("background-color", "White");
                            }
                        });
                    });
                    $.isEmptyObject(response) ? $(".auto-complete-list").css("visibility", "hidden") : $(".auto-complete-list").css("visibility", "visible");

                })
                .error(function (response) {
                    alert("error");
                })
                .complete(function (response) {
                    //alert("complete" + response.body); 
                });

            });

            // perform other work here ...
            // Set another completion function for the request above
            //jqxhr.complete(function () { alert("second complete"); });
        });
    </script>
<style type="text/css">
    body
    {
        text-align:center;
        font-family:Arial;
        font-size:12px;
    }
    #wrapper
    {
        padding-top:80px;
        text-align:left;
        width:500px;
        margin:0 auto;
        clear:both;
    }
    #search-panel
    {
        float:left;
    }
    #search
    {
        width:200px;
        margin:0;
        padding:6px;
    }
    .auto-complete-list
    {
        width:140px;
        margin:0;
        padding:0;
        border:1px solid #eee;
        position:absolute;
        visibility:hidden;/**/
    }
    .auto-complete-list li
    {
        list-style:none;
        width:128px;
        /*background-color:#ccc;*/
        padding:6px;
        cursor:pointer;
    }
    .input-form
    {
        width:250px;
    }
    input-form input
    {
        width:140px;
        
    }
    .input-form div
    {
        margin-bottom:5px;
        position:relative;
    }     
    label
    {
        display:inline-block; 
        width:80px;
        margin-right:5px;
    }
    #uiSubmit
    {
        margin-left:87px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="wrapper">
            <div class="input-form">
                <div id="name-wrapper">
                    <label for="uiName">Navn:</label>
                    <input type="text" id="uiName" name="uiName" />
                </div>
                <div>
                    <label for="uiAdress">Adresse:</label>
                    <input type="text" id="uiAddress" name="uiName" />
                </div>
                <div>
                    <label for="uiPhone">Telefon:</label>
                    <input type="text" id="uiPhone" name="uiName" />
                </div>
            </div>
            <input type="button" id="uiSubmit" value="send" />
        </div>
    </form>
</body>
</html>